<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="html5&amp;css3&amp;前端项目_黑马20211116, Lemonade&#39;s Blog">
    <meta name="description" content="
出发点：
美化博客
个人兴趣，为了会的更多一点

网页开发工程师
26h可以完成
HTML
开发环境
常用标签
综合案例

01基础认知
目标:认识 网页组成 和 五大浏览器，明确 Web标准的构成，使用 HTML骨架 搭建出一个网页。
">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="referrer" content="no-referrer-when-downgrade">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>html5&amp;css3&amp;前端项目_黑马20211116 | Lemonade&#39;s Blog</title>
    <link rel="icon" type="image/png" href="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/IMG_0551.JPG">

    <link rel="stylesheet" type="text/css" href="/libs/awesome/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/css/my.css">

    <script src="/libs/jquery/jquery-3.6.0.min.js"></script>

<meta name="generator" content="Hexo 6.0.0"><link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>




<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/" class="waves-effect waves-light">
                    
                    <span class="logo-span">Lemonade&#39;s Blog</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>留言板</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <div class="logo-name">Lemonade&#39;s Blog</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			留言板
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/blinkfox/hexo-theme-matery" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>Fork Me
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://github.com/blinkfox/hexo-theme-matery" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="Fork Me" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/medias/featureimages/5.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">html5&amp;css3&amp;前端项目_黑马20211116</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/tags/html5-css3/">
                                <span class="chip bg-color">html5&amp;css3</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/categories/6-%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/" class="post-category">
                                6.前端基础
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2022-01-02
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                    2022-01-10
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    13.5k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    53 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">

        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <blockquote>
<p>出发点：</p>
<p>美化博客</p>
<p>个人兴趣，为了会的更多一点</p>
</blockquote>
<p>网页开发工程师</p>
<p>26h可以完成</p>
<h1 id="HTML"><a href="#HTML" class="headerlink" title="HTML"></a>HTML</h1><blockquote>
<p>开发环境</p>
<p>常用标签</p>
<p>综合案例</p>
</blockquote>
<h2 id="01基础认知"><a href="#01基础认知" class="headerlink" title="01基础认知"></a>01基础认知</h2><blockquote>
<p>目标:认识 <code>网页组成</code> 和 <code>五大浏览器</code>，明确 <code>Web标准的构成</code>，使用 <code>HTML骨架</code> 搭建出一个网页。</p>
</blockquote>
<h3 id="认识网页-了解"><a href="#认识网页-了解" class="headerlink" title="认识网页(了解)"></a>认识网页(了解)</h3><blockquote>
<p><strong>问题1:网页由哪些部分组成?</strong></p>
<p>文字、图片、音频、视频、超链接</p>
<p><strong>问题2:我们看到的网页背后本质是什么?</strong></p>
<p>前端程序员写的代码</p>
<p><strong>问题3:前端的代码是通过什么软件转换成用户眼中的页面的?</strong> </p>
<p>通过浏览器转化(解析和渲染)成用户看到的网页</p>
</blockquote>
<h3 id="五大浏览器和渲染引擎"><a href="#五大浏览器和渲染引擎" class="headerlink" title="五大浏览器和渲染引擎"></a>五大浏览器和渲染引擎</h3><p>浏览器：是网页显示、运行的平台，是前端开发必备利器 </p>
<p>常见的五大浏览器：IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器、欧朋浏览器(Opera)</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103000121282.png" alt="" style="zoom:33%;" />



<p>渲染引擎(浏览器内核)：浏览器中专门<code>对代码进行解析渲染的部分</code></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103000227972.png"></p>
<blockquote>
<p>注意：</p>
<p>渲染引擎不同，导致解析相同代码时的 速度、性能、效果也不同的 </p>
<p>谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱（推荐）</p>
</blockquote>
<h3 id="web标准"><a href="#web标准" class="headerlink" title="web标准"></a>web标准</h3><p> 为什么需要web标准？</p>
<blockquote>
<p>不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异</p>
<p>如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！</p>
<p><strong>Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！</strong> </p>
</blockquote>
<p>构成</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103000734045.png"></p>
<p>Web标准要求页面实现：结构（身体）、表现（样式美观）、行为（交互的动态效果）三层分离</p>
<blockquote>
<p>结构：HTML → 页面元素 </p>
<p>表现：CSS → 页面样式 </p>
<p>行为：JavaScript → 页面交互的动态效果</p>
</blockquote>
<h3 id="HTML基础知识"><a href="#HTML基础知识" class="headerlink" title="HTML基础知识"></a>HTML基础知识</h3><p>HTML（Hyper Text Markup Language）中文译为：超文本标记语言</p>
<p>专门用于网页开发的语言，主要通过<strong>HTML标签</strong>对网页中的文本、图片、音频、视频等内容进行描述</p>
<p><strong>HTML页面固定结构</strong></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103001225937.png"></p>
<p><strong>HTML骨架结构由哪些标签组成？</strong></p>
<blockquote>
<p>html标签：网页的整体 </p>
<p>head标签：网页的头部 </p>
<p>body标签：网页的身体 </p>
<p>title标签：网页的标题</p>
</blockquote>
<h3 id="开发工具推荐"><a href="#开发工具推荐" class="headerlink" title="开发工具推荐"></a>开发工具推荐</h3><p>开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder </p>
<p>前端开发神器：<strong>VS Code</strong> → 速度快、体积小、插件多</p>
<blockquote>
<p><strong>快速查看网页效果：右击 → Open in Default Browser</strong></p>
<p><strong>必须安装了open in browser 插件</strong> </p>
</blockquote>
<h3 id="语法规范"><a href="#语法规范" class="headerlink" title="语法规范"></a>语法规范</h3><p>HTML标签构成</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103002005953.png"></p>
<p>HTML标签属性</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103002139372.png"></p>
<p>HTML标签关系</p>
<pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- 父子关系（嵌套关系） --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>

<span class="token comment" spellcheck="true">&lt;!-- 兄弟关系（并列关系） --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103002614296.png"></p>
<h2 id="02HTML标签学习"><a href="#02HTML标签学习" class="headerlink" title="02HTML标签学习"></a>02HTML标签学习</h2><blockquote>
<p>标题h系列、段落p、换行br、水平线hr</p>
<p>加粗strong、下划线ins、倾斜em、删除线del</p>
<p>img标签 + src属性 + alt属性 + title属性 + width属性 + height属性 </p>
<p>相对路径：同级目录 + 下级目录 + 上级目录 </p>
<p>音视频标签：audio标签、 video标签 + src属性 + controls属性</p>
<p>链接标签：a标签 + href属性 + target属性</p>
</blockquote>
<hr>

<h3 id="排版标签"><a href="#排版标签" class="headerlink" title="排版标签"></a>排版标签</h3><p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103003747776.png"></p>
<p><code>p</code>标签：段落之间存在间隙；独占一行。</p>
<h3 id="文本格式化标签"><a href="#文本格式化标签" class="headerlink" title="文本格式化标签"></a>文本格式化标签</h3><p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103104347611.png"></p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>b</span><span class="token punctuation">></span></span>加粗<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>b</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>strong</span><span class="token punctuation">></span></span>加粗<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>strong</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>u</span><span class="token punctuation">></span></span>下划线<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>u</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>i</span><span class="token punctuation">></span></span>倾斜<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>i</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>s</span><span class="token punctuation">></span></span>删除线<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>s</span><span class="token punctuation">></span></span>
</code></pre>
<p>推荐：strong、ins、em、del，表示的强调语义更强烈！</p>
<h3 id="媒体标签"><a href="#媒体标签" class="headerlink" title="媒体标签"></a>媒体标签</h3><h4 id="图片标签"><a href="#图片标签" class="headerlink" title="图片标签"></a>图片标签</h4><p>在网页中显示图片</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
</code></pre>
<p><code>img</code>标签需要展示对应的效果，需要借助标签的属性进行设置！</p>
<h5 id="src属性"><a href="#src属性" class="headerlink" title="src属性"></a><code>src</code>属性</h5><blockquote>
<p>目标图片的路径</p>
<p>当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103105734439.png"></p>
<p>绝对路径和相对路径</p>
<p>VS Code快捷操作：同级和下级目录在<code>./</code> 之后选择即可 ,上级目录在<code>../</code> 之后选择即可</p>
<h5 id="alt"><a href="#alt" class="headerlink" title="alt"></a><code>alt</code></h5><blockquote>
<p>当图片加载失败时，才显示alt的文本</p>
</blockquote>
<h5 id="title"><a href="#title" class="headerlink" title="title"></a><code>title</code></h5><blockquote>
<p>当鼠标悬停时，才显示的文本</p>
</blockquote>
<h5 id="width和height"><a href="#width和height" class="headerlink" title="width和height"></a><code>width</code>和<code>height</code></h5><blockquote>
<p>宽度和高度（数字）</p>
<p>如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）</p>
<p>如果同时设置了width和height两个，若设置不当此时图片可能会变形</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103105930810.png"></p>
<h4 id="音频标签"><a href="#音频标签" class="headerlink" title="音频标签"></a>音频标签</h4><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>audio</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./music.mp3<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>audio</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p>src：路径</p>
<p>controls：显示播放的控件</p>
<p>autoplay：自动播放</p>
<p>loop：循环播放</p>
<p>音频标签目前支持三种格式：<strong>MP3</strong>、Wav、Ogg</p>
</blockquote>
<h4 id="视频标签"><a href="#视频标签" class="headerlink" title="视频标签"></a>视频标签</h4><pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>video</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./video.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>video</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p>src：路径</p>
<p>controls：显示播放的控件</p>
<p>autoplay：自动播放</p>
<p>loop：循环播放</p>
<p>视频标签目前支持三种格式：<strong>MP4</strong> 、WebM 、Ogg </p>
</blockquote>
<h3 id="链接标签"><a href="#链接标签" class="headerlink" title="链接标签"></a>链接标签</h3><blockquote>
<p>点击之后，从一个页面跳转到另一个页面 </p>
<p>a标签、超链接、锚链接</p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token comment" spellcheck="true">&lt;!-- 外部链接 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https:www.baidu.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>百度一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>

<span class="token comment" spellcheck="true">&lt;!-- 内部链接 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>./目标网页.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>超链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p>如果需要a标签点击之后去指定页面，需要设置a标签的href属性</p>
</blockquote>
<p><code>href</code>属性</p>
<p>点击之后跳转去哪一个网页（目标网页的路径）</p>
<blockquote>
<p>搭建网页结构</p>
<p>划分页面区域</p>
</blockquote>
<p><code>target</code>属性</p>
<p>目标网页的打开形式</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https:www.baidu.com<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>百度一下<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p><code>_self</code>：默认值，在当前窗口跳转（覆盖原网页）</p>
<p><code>_blank</code>：在新窗口跳转（保留原网页）</p>
</blockquote>
<p>另外：</p>
<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>空链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
</code></pre>
<p>点击之后回到网页顶部</p>
<p>开发中不确定该链接最终跳转位置，用空链接占个位置</p>
<h2 id="03综合案例"><a href="#03综合案例" class="headerlink" title="03综合案例"></a>03综合案例</h2><h3 id="招聘案例"><a href="#招聘案例" class="headerlink" title="招聘案例"></a>招聘案例</h3><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103203617866.png" alt="" style="zoom:33%;" />



<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103221158272.png"></p>
<h3 id="今日热词案例"><a href="#今日热词案例" class="headerlink" title="今日热词案例"></a>今日热词案例</h3><p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103222124684.png"></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103224803489.png"></p>
<h2 id="04列表标签"><a href="#04列表标签" class="headerlink" title="04列表标签"></a>04列表标签</h2><p>场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单</p>
<p>特点：按照行的方式，整齐显示内容</p>
<blockquote>
<p>无序列表最常用，有序列表偶尔用，自定义列表底部导航用</p>
<p><code>ul</code>标签：表示无序列表的整体，<code>li</code>标签：表示无序列表的每一项。</p>
<p><code>ol</code>标签：表示有序列表的整体，<code>li</code>标签：表示有序列表的每一项。</p>
<p><code>dl</code>标签用于包含dt/dd标签，<code>dt</code>表示自定义列表的主题，<code>dd</code>表示自定义列表的主题的每一项内容。</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103234716053.png"></p>
<h2 id="05表格标签"><a href="#05表格标签" class="headerlink" title="05表格标签"></a>05表格标签</h2><blockquote>
<p>基础</p>
</blockquote>
<table>
<thead>
<tr>
<th>标签</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td><code>table</code></td>
<td>表格整体，用于包裹多个tr</td>
</tr>
<tr>
<td><code>tr</code></td>
<td>表格每行，用于包裹td</td>
</tr>
<tr>
<td><code>td</code></td>
<td>表格单元格，用于包裹内容</td>
</tr>
</tbody></table>
<p>标签的嵌套关系：table &gt; tr &gt; td</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220103235611228.png" alt="" style="zoom: 33%;" />



<blockquote>
<p>属性</p>
</blockquote>
<table>
<thead>
<tr>
<th>属性名</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td><code>border</code></td>
<td>边框宽度（数字）</td>
</tr>
<tr>
<td><code>width</code></td>
<td>表格宽度（数字）</td>
</tr>
<tr>
<td><code>height</code></td>
<td>表格高度（数字）</td>
</tr>
</tbody></table>
<p>实际开发时针对于样式效果推荐用CSS设置</p>
<blockquote>
<p>表格标题和表头单元格标签</p>
</blockquote>
<table>
<thead>
<tr>
<th>标签名</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td><code>caption</code></td>
<td>表格整体大标题，默认在表格整体顶部居中位置显示</td>
</tr>
<tr>
<td><code>th</code></td>
<td>表格第一行，加粗并居中显示</td>
</tr>
</tbody></table>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104000221794.png" alt="" style="zoom:33%;" />

<p>caption标签书写在table标签内部</p>
<p>th标签书写在tr标签内部（用于替换td标签）</p>
<blockquote>
<p>表格的结构标签</p>
</blockquote>
<p>让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰 </p>
<table>
<thead>
<tr>
<th>标签</th>
<th>名称</th>
</tr>
</thead>
<tbody><tr>
<td>thead</td>
<td>表格头部</td>
</tr>
<tr>
<td>tbody</td>
<td>表格主体</td>
</tr>
<tr>
<td>tfoot</td>
<td>表格底部</td>
</tr>
</tbody></table>
<p>表格结构标签内部用于包裹tr标签</p>
<p>表格的结构标签可以省略</p>
<blockquote>
<p>合并单元格</p>
</blockquote>
<p>场景：将水平或垂直多个单元格合并成一个单元格</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104000642283.png"></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104105312479.png"></p>
<blockquote>
<p>① 表格基本标签：table &gt; tr &gt; td</p>
<p>② 表格标题和表头单元格标签：table &gt; caption + tr &gt; th</p>
<p>③ 表格结构标签：table &gt; thead &gt; tr &gt; td</p>
<p>④ 表格相关属性</p>
<p>跨行合并（rowspan）或者跨列合并（colspan）</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104105741644.png"></p>
<h2 id="06表单标签"><a href="#06表单标签" class="headerlink" title="06表单标签"></a>06表单标签</h2><h3 id="input系列标签"><a href="#input系列标签" class="headerlink" title="input系列标签"></a>input系列标签</h3><p>场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页</p>
<p><code>input</code>标签可以通过<code>type</code>属性值的不同，展示不同效果</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104110211381.png"></p>
<h4 id="text文本框"><a href="#text文本框" class="headerlink" title="text文本框"></a>text文本框</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>placeholder</td>
<td>提示用户输入内容的文本</td>
</tr>
</tbody></table>
<p><strong>（拓展）value属性和name属性作用介绍</strong> </p>
<blockquote>
<p>value属性：用户输入的内容，提交之后会发送给后端服务器</p>
<p>name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义</p>
<p>后端接收到数据的格式是：name的属性值 = value的属性值</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104111019586.png"></p>
<h4 id="password密码框"><a href="#password密码框" class="headerlink" title="password密码框"></a>password密码框</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>placeholder</td>
<td>提示用户输入内容的文本</td>
</tr>
</tbody></table>
<p>type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框</p>
<h4 id="radio单选框（多选一）"><a href="#radio单选框（多选一）" class="headerlink" title="radio单选框（多选一）"></a>radio单选框（多选一）</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>name</td>
<td>分组。有相同name属性值的单选框为一组，一组中只能有一个被选中</td>
</tr>
<tr>
<td>checked</td>
<td>默认选中</td>
</tr>
</tbody></table>
<h4 id="checkbox复选框（多选多）"><a href="#checkbox复选框（多选多）" class="headerlink" title="checkbox复选框（多选多）"></a>checkbox复选框（多选多）</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>checked</td>
<td>默认选中</td>
</tr>
</tbody></table>
<h4 id="file文件选择"><a href="#file文件选择" class="headerlink" title="file文件选择"></a>file文件选择</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>multiple</td>
<td>多文件选择</td>
</tr>
</tbody></table>
<h4 id="submit-amp-reset-amp-button按钮"><a href="#submit-amp-reset-amp-button按钮" class="headerlink" title="submit&amp;reset&amp;button按钮"></a>submit&amp;reset&amp;button按钮</h4><table>
<thead>
<tr>
<th>属性</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>submit</td>
<td>提交。点击之后提交数据给后端服务器。</td>
</tr>
<tr>
<td>reset</td>
<td>重置。点击之后恢复表单默认值。</td>
</tr>
<tr>
<td>button</td>
<td>普通。默认无功能，之后配合js添加功能。</td>
</tr>
</tbody></table>
<p>如果需要实现以上按钮功能，需要配合form标签使用</p>
<p>form使用方法：用form标签把表单标签一起包裹起来即可</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104112104671.png"></p>
<h3 id="button按钮标签"><a href="#button按钮标签" class="headerlink" title="button按钮标签"></a>button按钮标签</h3><p>场景：在网页中显示用户点击的按钮。</p>
<p>type属性值（同input的按钮系列），见上面。</p>
<p>谷歌浏览器中button默认是提交按钮</p>
<p>button标签是双标签，更便于包裹其他内容：文字、图片等</p>
<h3 id="select下拉菜单标签"><a href="#select下拉菜单标签" class="headerlink" title="select下拉菜单标签"></a>select下拉菜单标签</h3><p>场景：在网页中提供多个选择项的下拉菜单表单控件</p>
<blockquote>
<p><code>select</code>标签：下拉菜单的整体</p>
<p><code>option</code>标签：下拉菜单的每一项</p>
<p><code>selected</code>：下拉菜单的默认选中</p>
</blockquote>
<h3 id="textarea文本域标签"><a href="#textarea文本域标签" class="headerlink" title="textarea文本域标签"></a>textarea文本域标签</h3><p>在网页中提供可输入多行文本的表单控件，常用于网页评论区域</p>
<blockquote>
<p>cols：规定了文本域内可见宽度 </p>
<p>rows：规定了文本域内可见行数</p>
<p>右下角可以拖拽改变大小</p>
<p>实际开发时针对于样式效果推荐用CSS设置</p>
</blockquote>
<h3 id="label标签"><a href="#label标签" class="headerlink" title="label标签"></a>label标签</h3><p>场景：常用于绑定内容与表单标签的关系</p>
<blockquote>
<p>使用方法①： </p>
<p>\1. 使用label标签把内容（如：文本）包裹起来 </p>
<p>\2. 在表单标签上添加id属性 </p>
<p>\3. 在label标签的for属性中设置对应的id属性值 </p>
<p>使用方法②： </p>
<p>\1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 </p>
<p>\2. 需要把label标签的for属性删除即可</p>
</blockquote>
<h2 id="07语义化标签"><a href="#07语义化标签" class="headerlink" title="07语义化标签"></a>07语义化标签</h2><p>目标：能够认识开发中常用的 没有语义布局标签（ div、span ）和 有语义的布局标签</p>
<h3 id="没有语义的布局标签-div和span"><a href="#没有语义的布局标签-div和span" class="headerlink" title="没有语义的布局标签-div和span"></a>没有语义的布局标签-div和span</h3><blockquote>
<p>场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签</p>
<p>div标签：一行只显示一个（独占一行）</p>
<p>span标签：一行可以显示多个</p>
</blockquote>
<h3 id="有语义的布局标签"><a href="#有语义的布局标签" class="headerlink" title="有语义的布局标签"></a>有语义的布局标签</h3><p>场景：在HTML5新版本中，推出了一些有语义的布局标签供开发者使用</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104113137452.png"></p>
<h2 id="08字符实体-amp-nbsp显示空格"><a href="#08字符实体-amp-nbsp显示空格" class="headerlink" title="08字符实体 &amp;nbsp显示空格"></a>08字符实体 <code>&amp;nbsp</code>显示空格</h2><p>目标：能通过 字符实体 在网页中显示特殊符号</p>
<h3 id="HTML中的空格合并现象"><a href="#HTML中的空格合并现象" class="headerlink" title="HTML中的空格合并现象"></a>HTML中的空格合并现象</h3><blockquote>
<p>场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104113516600.png"></p>
<h3 id="常见字符实体"><a href="#常见字符实体" class="headerlink" title="常见字符实体"></a>常见字符实体</h3><blockquote>
<p>场景：在网页中展示特殊符号效果时，需要使用字符实体替代</p>
<p>结构： &amp;英文</p>
<p>空格的字符实体是？ <code> &amp;nbsp</code></p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104113612552.png" style="zoom:33%;" />



<h2 id="09综合案例"><a href="#09综合案例" class="headerlink" title="09综合案例"></a>09综合案例</h2><h3 id="综合案例1-优秀学生信息表格"><a href="#综合案例1-优秀学生信息表格" class="headerlink" title="综合案例1-优秀学生信息表格"></a>综合案例1-优秀学生信息表格</h3><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104113808629.png" style="zoom:67%;" />



<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>table</span> <span class="token attr-name">border</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>1<span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>caption</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>优秀学生信息表格<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>caption</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">></span></span>年级<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">></span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">></span></span>学号<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>th</span><span class="token punctuation">></span></span>班级<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>th</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">rowspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>高三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>张三<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>110<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>三年二班<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
            <span class="token comment" spellcheck="true">&lt;!-- &lt;td>高三&lt;/td> --></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>赵四<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>120<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>三年三班<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>tr</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span><span class="token punctuation">></span></span>评语<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>td</span> <span class="token attr-name">colspan</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>你们都很优秀<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>td</span><span class="token punctuation">></span></span>
            <span class="token comment" spellcheck="true">&lt;!-- &lt;td>&lt;/td> --></span>
            <span class="token comment" spellcheck="true">&lt;!-- &lt;td>&lt;/td> --></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>tr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">></span></span>
    
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="综合案例2-会员注册表单"><a href="#综合案例2-会员注册表单" class="headerlink" title="综合案例2-会员注册表单"></a>综合案例2-会员注册表单</h3><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104113740789.png" style="zoom:50%;" />

<pre class=" language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>青春不常在，抓紧谈恋爱<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            昵称：<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>请输入昵称<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            性别：
            <span class="token comment" spellcheck="true">&lt;!-- label点击文字也可以选中 --></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>性别<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>男<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>性别<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>女<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span>
            <span class="token comment" spellcheck="true">&lt;!-- &lt;input type="radio" name="性别">男
            &lt;input type="radio" name="性别">女 --></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            所在城市：
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">></span></span>上海<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span><span class="token punctuation">></span></span>北京<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
                <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>option</span> <span class="token attr-name">selected</span><span class="token punctuation">></span></span>武汉<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>option</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            婚姻状况：
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>婚姻状况<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>未婚
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>婚姻状况<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>已婚
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>婚姻状况<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>保密
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            喜欢的类型：
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>类型<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>可爱
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>类型<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span>性感
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>类型<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>御姐
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>类型<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>萝莉
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            个人介绍：
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>textarea</span> <span class="token attr-name">cols</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token attr-name">rows</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>textarea</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h3</span><span class="token punctuation">></span></span>我承诺<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h3</span>  <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>年满18、单身<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>抱着严肃的态度<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">></span></span>真诚寻找另一半<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>我同意<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我同意所有条款
        <span class="token comment" spellcheck="true">&lt;!-- 按钮：input、button --></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>免费注册<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>重置<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reset<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>重置<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
</code></pre>
<h1 id="CSS"><a href="#CSS" class="headerlink" title="CSS"></a>CSS</h1><blockquote>
<p>选择器</p>
<p>常见样式</p>
<p>布局案例</p>
</blockquote>
<h2 id="基础选择器-字体文本相关样式"><a href="#基础选择器-字体文本相关样式" class="headerlink" title="基础选择器+字体文本相关样式"></a>基础选择器+字体文本相关样式</h2><blockquote>
<p>u 能够知道 CSS 的 引入方式 及区别 </p>
<p>u 能够使用 基础选择器 在 HTML 中选择元素 </p>
<p>u 能够使用 字体和文本相关样式 修改文字样式 </p>
<p>u 能够使用 CSS 让页面中元素水平居中 </p>
<p>u 能够使用 Chrome调试工具 修改和检查样式</p>
</blockquote>
<h2 id="01-基础认知"><a href="#01-基础认知" class="headerlink" title="01 基础认知"></a>01 基础认知</h2><h4 id="初识"><a href="#初识" class="headerlink" title="初识"></a>初识</h4><blockquote>
<p>CSS：层叠样式表（Cascading style sheets）</p>
<p>作用：给页面中的HTML标签设置样式</p>
<p><code>css</code>写在<code>style</code>标签中，style标签一般写在<code>head</code>标签里面，title标签下面</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104133206674.png"></p>
<h4 id="引入方式"><a href="#引入方式" class="headerlink" title="引入方式"></a>引入方式</h4><blockquote>
<p>CSS常见三种引入方式的特点区别有哪些（书写位置、作用范围、使用场景） ？ </p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104133338746.png" alt="" style="zoom:50%;" />



<h2 id="02基础选择器"><a href="#02基础选择器" class="headerlink" title="02基础选择器"></a>02基础选择器</h2><p><strong>目标：理解选择器的作用，能够使用基础选择器在 HTML 中选择元素</strong></p>
<p>选择器的作用：选择页面中对应的标签（找她），方便后续设置样式（改她）</p>
<h4 id="一、标签选择器"><a href="#一、标签选择器" class="headerlink" title="一、标签选择器"></a>一、标签选择器</h4><blockquote>
<p>结构：<strong>标签名</strong> { css属性名：属性值； }</p>
<p>作用：通过标签名，找到页面中所有这类标签，设置样式</p>
<p>注意点： </p>
<ol>
<li><p>标签选择器选择的是一类标签，而不是单独某一个 </p>
</li>
<li><p>标签选择器无论嵌套关系有多深，都能找到对应的标签</p>
</li>
</ol>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104134028203.png" style="zoom:50%;" />



<h4 id="二、类选择器-（用的最多）"><a href="#二、类选择器-（用的最多）" class="headerlink" title="二、类选择器.（用的最多）"></a>二、类选择器.（用的最多）</h4><blockquote>
<p>结构：**.类名** { css属性名：属性值； } </p>
<p>作用：通过类名，找到页面中所有带有这个类名的标签，设置样式</p>
<p>注意点： </p>
<p>\1. 所有标签上都有class属性，class属性的属性值称为类名（类似于名字） </p>
<p>\2. 类名可以由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 </p>
<p>\3. 一个标签可以同时有多个类名，类名之间以空格隔开 </p>
<p>\4. 类名可以重复，一个类选择器可以同时选中多个标签</p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104134117003.png" style="zoom:50%;" />



<h4 id="三、id选择器"><a href="#三、id选择器" class="headerlink" title="三、id选择器#"></a>三、id选择器#</h4><blockquote>
<p>结构：**#id属性值** { css属性名：属性值； }</p>
<p>作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式</p>
<p>注意点： </p>
<p>\1. 所有标签上都有id属性 </p>
<p>\2. id属性值类似于身份证号码，在一个页面中是唯一的，不可重复的！ </p>
<p>\3. 一个标签上只能有一个id属性值 </p>
<p>\4. 一个id选择器只能选中一个标签</p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104134159712.png" alt="" style="zoom:50%;" />



<p><strong>补充：类与id的区别</strong></p>
<p><strong>class类名与id属性值的区别</strong> </p>
<blockquote>
<p>class类名相当于姓名，可以重复，一个标签可以同时有多个class类名 </p>
<p>id属性值相当于身份证号码，不可重复，一个标签只能有一个id属性值</p>
</blockquote>
<p><strong>类选择器与id选择器的区别</strong></p>
<blockquote>
<p>类选择器以 <strong>.</strong> 开头 </p>
<p>id选择器以 <strong>#</strong> 开头</p>
</blockquote>
<p><strong>实际开发的情况</strong></p>
<blockquote>
<p><strong>类选择器用的最多</strong> </p>
<p>id一般配合<code>js</code>使用，除非特殊情况，否则不要使用id设置样式 </p>
<p>实际开发中会遇到<strong>冗余代码的抽取</strong> （可以将一些公共的代码抽取到一个公共的类中去） </p>
</blockquote>
<h4 id="四、通配符选择器"><a href="#四、通配符选择器" class="headerlink" title="四、通配符选择器"></a>四、通配符选择器</h4><blockquote>
<p>结构：***** { css属性名：属性值； } </p>
<p>作用：找到页面中所有的标签，设置样式</p>
<p>注意点： </p>
<p>\1. 开发中使用极少，只会在极特殊情况下才会用到 </p>
<p>\2. 在基础班小页面中可能会用于去除标签默认的margin和padding（后续讲解）</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104134643779.png" style="zoom:50%;" />
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104134629490.png" style="zoom:50%;" />



<blockquote>
<p>\1. 选择器作用：选中页面中对应的标签（找她），方便后续设置样式（改她） </p>
<p>\2. 标签选择器：<strong>标签名</strong> { css属性名：属性值； } </p>
<p>\3. 类选择器：**.类名** { css属性名：属性值； } </p>
<p>\4. id选择器：**#id属性值** { css属性名：属性值； } </p>
<p>\5. 通配符选择器：***** { css属性名：属性值； }</p>
</blockquote>
<h2 id="03-字体和文本样式"><a href="#03-字体和文本样式" class="headerlink" title="03 字体和文本样式"></a>03 字体和文本样式</h2><p><strong>目标：能够使用</strong> <strong>字体和文本相关样式</strong> <strong>修改元素外观样式</strong></p>
<h4 id="字体样式"><a href="#字体样式" class="headerlink" title="字体样式"></a>字体样式</h4><blockquote>
<ol>
<li>字体大小：<code>font-size </code></li>
</ol>
<p>取值：数字 + px</p>
<p>注意点： </p>
<p>• 谷歌浏览器默认文字大小是16px </p>
<p>• 单位需要设置，否则无效</p>
</blockquote>
<blockquote>
<ol start="2">
<li>字体粗细：<code>font-weight </code></li>
</ol>
<table>
<thead>
<tr>
<th>关键字</th>
<th>纯数字：100~900的整百数</th>
</tr>
</thead>
<tbody><tr>
<td>正常 <code>normal</code></td>
<td>正常 <code>400</code></td>
</tr>
<tr>
<td>加粗 <code>bold</code></td>
<td>加粗 <code>700</code></td>
</tr>
</tbody></table>
<p>不是所有字体都提供了九种粗细，因此部分取值页面中无变化</p>
<p>实际开发中以：正常、加粗两种取值使用最多。</p>
</blockquote>
<blockquote>
<ol start="3">
<li>字体样式：<code>font-style</code> </li>
</ol>
<p>正常（默认值）：<code>normal</code></p>
<p>倾斜：<code>italic</code></p>
</blockquote>
<p><strong>常见字体系列（了解）</strong></p>
<table>
<thead>
<tr>
<th></th>
<th><strong>无衬线字体</strong>（sans-serif）</th>
<th><strong>衬线字体</strong>（serif）</th>
<th><strong>等宽字体</strong>（monospace）</th>
</tr>
</thead>
<tbody><tr>
<td>特点</td>
<td>文字笔画粗细均匀，并且首尾无装饰</td>
<td>文字笔画粗细不均，并且首尾有笔锋装饰</td>
<td>每个字母或文字的宽度相等</td>
</tr>
<tr>
<td>场景</td>
<td>网页中大多采用无衬线字体</td>
<td>报刊书籍中应用广泛</td>
<td>一般用于程序代码编写，有利于代码的阅读和编写</td>
</tr>
<tr>
<td>常见</td>
<td>常见该系列字体：黑体、Arial</td>
<td>宋体、Times New Roman</td>
<td>Consolas、fira code</td>
</tr>
</tbody></table>
<blockquote>
<ol start="4">
<li><p>字体类型：<code>font-family </code></p>
<p>常见取值：具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列</p>
<ul>
<li><p>具体字体：”Microsoft YaHei”、微软雅黑、黑体、宋体、楷体等……</p>
</li>
<li><p>字体系列：sans-serif、serif、monospace等……</p>
</li>
</ul>
</li>
</ol>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104140924165.png" style="zoom:33%;" />
</blockquote>
<p><strong>样式的层叠问题</strong></p>
<p>给同一个标签设置了相同的样式，此时浏览器会如何渲染呢？</p>
<p>如果给同一个标签设置了相同的属性，此时样式会层叠（覆盖），写在最下面的会生效 </p>
<blockquote>
<ol start="5">
<li>字体类型：<code>font属性连写</code></li>
</ol>
<p>取值：<code>font : style weight size family</code></p>
<p>顺序：swsf （稍微舒服）</p>
<p>只能省略前两个，如果省略了相当于设置了默认值</p>
</blockquote>
<blockquote>
<p>Ø 字体大小： font-size </p>
<p>• 数字+px </p>
<p>Ø 字体粗细：font-weight </p>
<p>• 正常：normal 或 400 </p>
<p>• 加粗：bold 或 700 </p>
<p>Ø 字体样式：font-style </p>
<p>• 正常：normal </p>
<p>• 倾斜：italic </p>
<p>Ø 字体系列：font-family </p>
<p>• 具体字体1,具体字体2,具体字体3,具体字体4,…,字体系列 </p>
<p>Ø 字体连写：font </p>
<p>• font : style weight size family;</p>
</blockquote>
<h4 id="文本样式"><a href="#文本样式" class="headerlink" title="文本样式"></a>文本样式</h4><h5 id="文本缩进：text-indent"><a href="#文本缩进：text-indent" class="headerlink" title="文本缩进：text-indent"></a>文本缩进：text-indent</h5><p>取值：</p>
<p>数字+px</p>
<p>数字+em（推荐：1em = 当前标签的font-size的大小）</p>
<h5 id="文本水平对齐方式：text-align"><a href="#文本水平对齐方式：text-align" class="headerlink" title="文本水平对齐方式：text-align"></a>文本水平对齐方式：text-align</h5><table>
<thead>
<tr>
<th>属性值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td><code>left</code></td>
<td>左对齐</td>
</tr>
<tr>
<td><code>center</code></td>
<td>居中对齐</td>
</tr>
<tr>
<td><code>right</code></td>
<td>右对齐</td>
</tr>
</tbody></table>
<p>如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置</p>
<h5 id="文本修饰：text-decoration"><a href="#文本修饰：text-decoration" class="headerlink" title="文本修饰：text-decoration"></a>文本修饰：text-decoration</h5><table>
<thead>
<tr>
<th>属性值</th>
<th>效果</th>
</tr>
</thead>
<tbody><tr>
<td><code>underline</code></td>
<td>下划线（常用）</td>
</tr>
<tr>
<td><code>line-through</code></td>
<td>删除线（几乎不用）</td>
</tr>
<tr>
<td><code>overline</code></td>
<td>上划线（几乎不用）</td>
</tr>
<tr>
<td><code>none</code></td>
<td>无装饰线（常用）</td>
</tr>
</tbody></table>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104142254541.png" alt="" style="zoom:33%;" />

<p>开发中会使用 <code>text-decoration : none</code> ; 清除<code>a</code>标签默认的下划线</p>
<p><strong>文本样式总结</strong></p>
<blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104142525222.png" alt="" style="zoom:50%;" />
</blockquote>
<p><strong>水平居中方法总结</strong></p>
<blockquote>
<p><strong>text-align : center</strong></p>
<p>能让哪些元素水平居中：文本；span标签、a标签；input标签、img标签</p>
<p>注：如果需要让以上元素水平居中， text-align : center 需要给以上元素的 父元素 设置</p>
</blockquote>
<blockquote>
<p><strong>margin : 0 auto</strong></p>
<p>让<code>div</code>、<code>p</code>、<code>h（大盒子）</code>水平居中</p>
<p>注：</p>
<ul>
<li><p>如果需要让 div、p、h（大盒子） 水平居中，直接给 当前元素本身 设置即可 </p>
</li>
<li><p>margin：0 auto 一般针对于固定宽度的盒子，如果大盒子没有设置宽度，此时会默认占满父元素的宽度 </p>
</li>
</ul>
</blockquote>
<h4 id="line-height行高"><a href="#line-height行高" class="headerlink" title="line-height行高"></a>line-height行高</h4><p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104143913555.png"></p>
<h2 id="04-Chrome调试工具"><a href="#04-Chrome调试工具" class="headerlink" title="04 Chrome调试工具"></a>04 Chrome调试工具</h2><p>目标：能够认识 Chrome调试工具 的基础操作，能够使用 Chrome 调试工具 修改和调试样式</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104144046809.png"></p>
<h2 id="05-拓展-颜色常见取值（了解）"><a href="#05-拓展-颜色常见取值（了解）" class="headerlink" title="05 拓展 颜色常见取值（了解）"></a>05 拓展 颜色常见取值（了解）</h2><p>文字颜色：color</p>
<p>背景颜色：background-color</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104145002528.png"></p>
<blockquote>
<p>取值类型①：<strong>关键词</strong></p>
<p>red：红色、green：绿色、blue：蓝色、yellow：黄色、</p>
<p>orange：橘色、skyblue：天蓝色、pink：粉色</p>
<p>取值类型②：<strong>rgb表示法</strong></p>
<p>每项取值范围：<strong>0~255</strong></p>
<p>rgb ( 255 , 0 , 0 ) ：红色</p>
<p>取值类型③：<strong>rgba表示法</strong></p>
<p>比rgb表示法多个一个a，a表示透明度。a的取值范围：0~1（1：完全不透明，0：完全透明）</p>
<p>取值类型④：<strong>十六进制表示法</strong></p>
<p>两个数字为一组，每个数字的取值范围：<code>0~9 , a , b , c , d , e , f</code></p>
<p>实际开发中会直接使用测量工具直接得到颜色，不需要前端自己设计颜色，直接复制粘贴即可。</p>
</blockquote>
<h2 id="06-综合案例"><a href="#06-综合案例" class="headerlink" title="06 综合案例"></a>06 综合案例</h2><h3 id="一、新闻网页"><a href="#一、新闻网页" class="headerlink" title="一、新闻网页"></a>一、新闻网页</h3><p>要求：对于大小、颜色等具体样式取值，参考效果图上的标注即可</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104145621280.png" style="zoom: 50%;" />

<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">800</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">600</span>px<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* background-color: pink; */</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* h1 {
            text-align: center;
        } */</span>
        <span class="token comment" spellcheck="true">/**p {
            text-align: center;
        }后面还有其他的段落不居中，故不能用此方法*/</span>
        <span class="token comment" spellcheck="true">/* 使用类选择器设置段落居中 */</span>
        <span class="token selector"><span class="token class">.center</span> </span><span class="token punctuation">{</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.color1</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#808080</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.color2</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#87ceeb</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 加粗 */</span>
            <span class="token property">font-weight</span><span class="token punctuation">:</span> <span class="token number">700</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector">a </span><span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">/* 去除下划线 */</span>
            <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* 段落内容首行缩进 */</span>
        <span class="token comment" spellcheck="true">/* 横线上面的p标签不缩进，故不能统一使用标签选择器，应当使用类选择器， */</span>
        <span class="token selector"><span class="token class">.suojin</span> </span><span class="token punctuation">{</span>
            <span class="token property">text-indent</span><span class="token punctuation">:</span> <span class="token number">2</span>em<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!--  --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>《自然》评选改变科学的10个计算机代码项目<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2077年01月28日14:58<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>color2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪科技<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>收藏本文<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>hr</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>suojin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>suojin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录这一发现，其他研究者也可以在此基础上进一步加以分析。
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>suojin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”他说，“问题在于，我们仍然需要思考。”
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>suojin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>suojin<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
            最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x= 3 + 5。然后由编译器将这些指令转换成快速、高效的机器代码。
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="二、小米官网卡片居中"><a href="#二、小米官网卡片居中" class="headerlink" title="二、小米官网卡片居中"></a>二、小米官网卡片居中</h3><p>要求：对于大小、颜色等具体样式取值，参考效果图上的标注即可</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104145704662.png" style="zoom:50%;" />

<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">body </span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#f5f5f5</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.goods</span> </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">234</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 标签div居中 */</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">0</span> auto<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 内容居中 */</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">img </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">160</span>px<span class="token punctuation">;</span>

        <span class="token punctuation">}</span>

        <span class="token selector"><span class="token class">.name</span> </span><span class="token punctuation">{</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span>px<span class="token punctuation">;</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">25</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector"><span class="token class">.info</span> </span><span class="token punctuation">{</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">30</span>px<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ccc</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

        <span class="token selector"><span class="token class">.money</span> </span><span class="token punctuation">{</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">14</span>px<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ffa500</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- div 用来网页布局，一个页面可能用无数次，原则：如果用div，尽量使用类名控制样式--></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>goods<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../images/car.jpg<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>name<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>九号平衡车<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>info<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>成年人的玩具<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>money<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1999元<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h2 id="选择器进阶-背景属性-元素显示模式-三大特性（day04）"><a href="#选择器进阶-背景属性-元素显示模式-三大特性（day04）" class="headerlink" title="选择器进阶+背景属性+元素显示模式+三大特性（day04）"></a>选择器进阶+背景属性+元素显示模式+三大特性（day04）</h2><blockquote>
<p>u 能够使用 复合选择器 在 HTML 中选择元素 </p>
<p>u 能够使用 Emmet 语法提高编码速度 </p>
<p>u 能够使用 hover伪类选择器 设置标签的鼠标悬停状态 </p>
<p>u 能够使用 背景相关属性 装饰元素的背景样式 </p>
<p>u 能够认识三种常见的 元素显示模式 的特点 </p>
<p>u 能够使用代码实现不同 元素显示模式 间的转换 </p>
<p>u 能够实现行内元素和块级元素 水平居中</p>
</blockquote>
<h2 id="07-选择器进阶"><a href="#07-选择器进阶" class="headerlink" title="07 选择器进阶"></a>07 选择器进阶</h2><p>目标：能够理解 复合选择器 的规则，并使用 复合选择器 在 HTML 中选择元素</p>
<h3 id="一、复合选择器"><a href="#一、复合选择器" class="headerlink" title="一、复合选择器"></a>一、复合选择器</h3><h4 id="后代选择器：空格"><a href="#后代选择器：空格" class="headerlink" title="后代选择器：空格"></a>后代选择器：空格</h4><blockquote>
<p>根据 HTML 标签的嵌套关系，选择父元素 后代中 满足条件的元素 </p>
<p>选择器语法：<strong>选择器1 选择器2 { css }</strong></p>
<p>结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式</p>
<p>注意：后代包括：儿子、孙子、重孙子……；后代选择器中，选择器与选择器之前通过 <code>空格</code> 隔开。</p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 找到div的儿子p设置文字颜色是红色 */</span>
        <span class="token comment" spellcheck="true">/* 父选择器  后代选择器 {} */</span>
        <span class="token selector">div p </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 后代：儿子、孙子、重孙子...... --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>这是一个p标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>这是div的儿子p<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="二、子代选择器：-gt"><a href="#二、子代选择器：-gt" class="headerlink" title="二、子代选择器：&gt;"></a>二、子代选择器：&gt;</h3><blockquote>
<p>作用：根据 HTML 标签的嵌套关系，选择父元素 子代中 满足条件的元素</p>
<p>选择器语法：<strong>选择器1 &gt; 选择器2 { css }</strong> </p>
<p>结果：在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式</p>
<p>注意：子代只包括：儿子 ；子代选择器中，选择器与选择器之间通过 <code>&gt;</code> 隔开。</p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 空格隔开的是后代：儿子、孙子、重孙子.... */</span>
        <span class="token comment" spellcheck="true">/* div a {
            color: red;
        } */</span>

        <span class="token comment" spellcheck="true">/* 只想选中儿子a */</span>
        <span class="token selector">div>a </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>
        父级
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是div里面的a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>
            <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是div里面的p里面的a<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="三、并集选择器"><a href="#三、并集选择器" class="headerlink" title="三、并集选择器"></a>三、并集选择器</h3><blockquote>
<p>作用：<strong>同时选择多组标签，设置相同的样式</strong></p>
<p>选择器语法：<strong>选择器1 ， 选择器2 { css }</strong></p>
<p>结果：找到 选择器1 和 选择器2 选中的标签，设置样式</p>
<p>注意：</p>
<ul>
<li><p>并集选择器中的每组选择器之间通过 <strong>,</strong> 分隔</p>
</li>
<li><p>并集选择器中的每组选择器可以是基础选择器或者复合选择器</p>
</li>
<li><p>并集选择器中的每组选择器通常一行写一个，提高代码的可读性 </p>
</li>
</ul>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 换行：干净整洁 */</span>
        <span class="token selector">p, 
        div, 
        span, 
        h1 </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>p<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span>span<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h1</span><span class="token punctuation">></span></span>h1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h1</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="四、交集选择器：紧挨着"><a href="#四、交集选择器：紧挨着" class="headerlink" title="四、交集选择器：紧挨着"></a>四、交集选择器：紧挨着</h3><blockquote>
<p>作用：选中页面中 同时满足 多个选择器的标签</p>
<p>选择器语法：<strong>选择器1选择器2 { css }</strong></p>
<p>结果：（既又原则）找到页面中 <strong>既</strong> 能被选择器1选中，<strong>又</strong> 能被选择器2选中的标签，设置样式</p>
<p>注意：</p>
<ul>
<li><p>交集选择器中的选择器之间是紧挨着的，没有东西分隔</p>
</li>
<li><p>交集选择器中如果有标签选择器，标签选择器必须写在最前面</p>
</li>
</ul>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* p {
            color: red;
        } */</span>

        <span class="token comment" spellcheck="true">/* .box {
            color: red;
        } */</span>

        <span class="token selector">p<span class="token class">.box</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>

    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 找到第一个p，带box类的，设置文字颜色是红色 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是p标签:box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">></span></span>pppppp<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是div标签:box<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="Emmet语法（简化写法，快速生成代码）"><a href="#Emmet语法（简化写法，快速生成代码）" class="headerlink" title="Emmet语法（简化写法，快速生成代码）"></a>Emmet语法（简化写法，快速生成代码）</h3><p>作用：通过简写语法，快速生成代码</p>
<p>语法：类似于刚刚学习的选择器的写法 </p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104150728486.png" style="zoom: 50%;" />



<h3 id="五、hover伪类选择器（鼠标悬停颜色变化）"><a href="#五、hover伪类选择器（鼠标悬停颜色变化）" class="headerlink" title="五、hover伪类选择器（鼠标悬停颜色变化）"></a>五、hover伪类选择器（鼠标悬停颜色变化）</h3><blockquote>
<p>作用：选中鼠标<strong>悬停</strong>在元素上的<strong>状态</strong>，设置样式</p>
<p>选择器语法：选择器**:hover** { css }</p>
<p>注意：</p>
<ul>
<li>伪类选择器选中的元素的<strong>某种状态</strong></li>
</ul>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 悬停的时候文字颜色是红色 */</span>
        <span class="token selector">a<span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">div<span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> green<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>这是超链接<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- 任何标签都可以添加伪类，任何一个标签都可以鼠标悬停 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p>复合选择器小结：</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104150800150.png"></p>
<h2 id="08-背景相关属性"><a href="#08-背景相关属性" class="headerlink" title="08 背景相关属性"></a>08 背景相关属性</h2><p>目标：能够使用 背景相关属性 装饰元素的背景样式</p>
<h3 id="一、背景颜色-background-color（bgc）"><a href="#一、背景颜色-background-color（bgc）" class="headerlink" title="一、背景颜色 background-color（bgc）"></a>一、背景颜色 background-color（bgc）</h3><p>属性名：background-color（bgc）</p>
<p>属性值：颜色取值：关键字、rgb表示法、rgba表示法、十六进制……</p>
<p>背景颜色默认值是<strong>透明</strong>： rgba(0,0,0,0) 、transparent</p>
<p>背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色</p>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>div<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220105235222744.png" style="zoom: 33%;" />



<h3 id="二、背景图片-background-image（bgi）"><a href="#二、背景图片-background-image（bgi）" class="headerlink" title="二、背景图片 background-image（bgi）"></a>二、背景图片 background-image（bgi）</h3><p>属性值： <code>background-image: url(&#39;图片的路径&#39;)</code></p>
<p>背景图片中url中可以省略引号</p>
<p>背景图片默认是在水平和垂直方向平铺的 </p>
<p>背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不能撑开盒子的 </p>
<pre class=" language-html"><code class="language-html">background-image: url(./images/1.jpg);
</code></pre>
<h3 id="三、背景平铺（复制）-background-repeat（bgr）"><a href="#三、背景平铺（复制）-background-repeat（bgr）" class="headerlink" title="三、背景平铺（复制） background-repeat（bgr）"></a>三、背景平铺（复制） background-repeat（bgr）</h3><p>常见属性值</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104154136594.png" style="zoom:50%;" />

<pre class=" language-html"><code class="language-html">background-repeat: no-repeat;
</code></pre>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220106232302017.png"></p>
<h3 id="四、背景位置-background-position（bgp）"><a href="#四、背景位置-background-position（bgp）" class="headerlink" title="四、背景位置 background-position（bgp）"></a>四、背景位置 <strong>background-position</strong>（bgp）</h3><p>属性值：<strong>background-position</strong>（bgp） ：水平方向位置 垂直方向位置</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104210448142.png" style="zoom:33%;" />

<p>方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直</p>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 不设置background-repeat的话，默认水平和垂直方向都平铺，所以会显示4张 */</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(./images/1.jpg)</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 背景平铺：no-repeat 不平铺，显示1张 */</span>
            <span class="token property">background-repeat</span><span class="token punctuation">:</span> no-repeat<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 背景位置 */</span>
            <span class="token comment" spellcheck="true">/* 左上角 */</span>
            <span class="token comment" spellcheck="true">/* background-position: 0 0; */</span>
            <span class="token comment" spellcheck="true">/* 右上角 */</span>
            <span class="token comment" spellcheck="true">/* background-position: right 0; */</span>
            <span class="token comment" spellcheck="true">/* 右下角 */</span>
            <span class="token comment" spellcheck="true">/* background-position: right bottom; */</span>
            <span class="token comment" spellcheck="true">/* 居中 */</span>
            <span class="token property">background-position</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 用像素描述 */</span>
            <span class="token property">background-position</span><span class="token punctuation">:</span> <span class="token number">50</span>px <span class="token number">0</span><span class="token punctuation">;</span>
          
              <span class="token comment" spellcheck="true">/* 正数：向右向下移动    负数：向左向上移动 */</span>
            <span class="token comment" spellcheck="true">/* 背景色和背景图只显示在盒子里面 */</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="背景相关属性连写background（bg）"><a href="#背景相关属性连写background（bg）" class="headerlink" title="背景相关属性连写background（bg）"></a>背景相关属性连写<strong>background</strong>（bg）</h3><p>属性值：单个属性值的合写，取值之间以空格隔开</p>
<p>顺序推荐：<code>background：color image repeat position</code></p>
<p>如果需要设置单独的样式和连写：</p>
<p>① 要么把单独的样式写在连写的下面 </p>
<p>② 要么把单独的样式写在连写的里面</p>
<pre class=" language-html"><code class="language-html">        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">400</span>px<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 不分先后顺序：背景色  背景图  背景图平铺  背景图位置 */</span>
            <span class="token property">background</span><span class="token punctuation">:</span> pink <span class="token url">url(./images/1.jpg)</span> no-repeat center center<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>img标签和背景图片的区别</strong></p>
<p>方法一：直接写上img标签即可。img标签是一个标签，不设置宽高默认会以原尺寸显示。</p>
<p>方法二：div标签 + 背景图片。<strong>需要设置div的宽高</strong>，因为背景图片只是装饰的CSS样式，不能撑开div标签。</p>
<blockquote>
<p>重要的图片用img，修饰性的用background</p>
</blockquote>
<h2 id="09-三种元素显示模式（显示方式）"><a href="#09-三种元素显示模式（显示方式）" class="headerlink" title="09 三种元素显示模式（显示方式）"></a>09 三种元素显示模式（显示方式）</h2><p>目标：能够认识三种常见的 元素显示模式，并通过代码实现不同 元素显示模式 的转换</p>
<h3 id="一、块级元素"><a href="#一、块级元素" class="headerlink" title="一、块级元素"></a>一、块级元素</h3><blockquote>
<p>属性：<code>display：block</code></p>
<p>显示特点：独占一行（一行只能显示一个） ；宽度默认是<strong>父元素的宽度</strong>，高度默认由内容撑开；可以设置宽高。</p>
<p>代表标签：<strong>div、p、h系列</strong>、ul、li、dl、dt、dd、form、header、nav、footer……    </p>
</blockquote>
<h3 id="二、行内元素"><a href="#二、行内元素" class="headerlink" title="二、行内元素"></a>二、行内元素</h3><blockquote>
<p>属性：<code>display：inline</code></p>
<p>显示特点：一行可以显示多个；宽度和高度默认由内容撑开，不可以设置宽高（也即设置不生效）</p>
<p>代表标签：<strong>a、span</strong> 、b、u、i、s、strong、ins、em、del……</p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104211618397.png" style="zoom:50%;" />



<h3 id="三、行内块元素"><a href="#三、行内块元素" class="headerlink" title="三、行内块元素"></a>三、行内块元素</h3><blockquote>
<p>属性：<code>display：inline-block</code></p>
<p>显示特点：一行可以显示多个 ；可以设置宽高。</p>
<p>代表标签：<strong>input、textarea、</strong>button、select…… </p>
<p>特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline</p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104211751935.png" style="zoom:50%;" />

<h3 id="元素显示模式转换display🌲"><a href="#元素显示模式转换display🌲" class="headerlink" title="元素显示模式转换display🌲"></a>元素显示模式转换display🌲</h3><p>目的：改变元素默认的显示特点，让元素符合布局要求</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104211853286.png" style="zoom:50%;" />



<p><strong>拓展1：HTML嵌套规范注意点</strong></p>
<blockquote>
<p>块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…… </p>
<p><strong>但是：</strong>p标签中不要嵌套div、p、h等块级元素</p>
<p>a标签内部可以嵌套任意元素</p>
<p><strong>但是：</strong>a标签不能嵌套a标签</p>
</blockquote>
<p><strong>拓展2：居中方法总结</strong></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104212007683.png"></p>
<h2 id="10-CSS-三大特性"><a href="#10-CSS-三大特性" class="headerlink" title="10 CSS 三大特性"></a>10 CSS 三大特性</h2><p>目标：能够认识 CSS 的 继承 和 层叠 特性，会计算 CSS 的 优先级和权重比较</p>
<h3 id="一、继承性"><a href="#一、继承性" class="headerlink" title="一、继承性"></a>一、继承性</h3><blockquote>
<p>特性：子元素有默认继承父元素样式的特点（子承父业）</p>
<p>可以继承的常见属性（控制文字的属性可以继承，不是控制文字的不能继承）：</p>
<p><code>color</code></p>
<p><code>font-style、font-weight、font-size、font-family </code></p>
<p><code>text-indent、text-align</code></p>
<p><code>line-height</code></p>
<p>注意：可以通过调试工具判断样式是否可以继承 </p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104212418746.png" style="zoom:50%;" />



<p><strong>（拓展）继承的应用</strong> </p>
<blockquote>
<p>好处：可以在一定程度上减少代码</p>
<p>常见应用场景：</p>
<ul>
<li><p>可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式</p>
</li>
<li><p>直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小</p>
</li>
</ul>
</blockquote>
<p><strong>（拓展）继承失效的特殊情况</strong></p>
<blockquote>
<p>如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式</p>
<ul>
<li><p>a标签的color会继承失效：其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了</p>
</li>
<li><p>h系列标签的font-size会继承失效 ：其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了</p>
</li>
<li><p>div的高度不能继承，但是宽度有类似于继承的效果：宽度属性不能基继承，但是div有独占一行的特性</p>
</li>
</ul>
</blockquote>
<h3 id="二、层叠性"><a href="#二、层叠性" class="headerlink" title="二、层叠性"></a>二、层叠性</h3><blockquote>
<p>特性：</p>
<ol>
<li><p>给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上 （如颜色和大小）</p>
</li>
<li><p>给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效 （如先设置绿色后设置红色）</p>
</li>
</ol>
<p>注意：</p>
<p>当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果</p>
</blockquote>
<p>​    </p>
<h3 id="三、优先级"><a href="#三、优先级" class="headerlink" title="三、优先级"></a>三、优先级</h3><h4 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h4><blockquote>
<p>特性：不同选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式。</p>
<p>优先级公式：继承 &lt; 通配符选择器 &lt; 标签选择器 &lt; 类选择器 &lt; id选择器 &lt; 行内样式 &lt; !important</p>
<p>注意点：</p>
<ul>
<li>!important写在属性值的后面，分号的前面！</li>
<li>!important不能提升继承的优先级，只要是继承优先级最低！ </li>
<li>实际开发中不建议使用 !important 。 </li>
</ul>
</blockquote>
<h4 id="权重叠加计算"><a href="#权重叠加计算" class="headerlink" title="权重叠加计算"></a>权重叠加计算</h4><blockquote>
<p>场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效</p>
<p><strong>权重叠加计算公式：</strong>（每一级之间不存在进位）</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104213920490.png"></p>
<p>比较规则：</p>
<p>\1. 先比较第一级数字，如果比较出来了，之后的统统不看 </p>
<p>\2. 如果第一级数字相同，此时再去比较第二级数字，如果比较出来了，之后的统统不看 </p>
<p>\3. …… </p>
<p>\4. 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）</p>
<p>注意点：!important如果不是继承，则权重最高，天下第一！（开发慎用）</p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 优先级叠加计算 */</span>
        <span class="token comment" spellcheck="true">/* (行内，id，类，标签) */</span>

        <span class="token comment" spellcheck="true">/* 优先级最高 */</span>
        <span class="token comment" spellcheck="true">/* （0，1，0，1） */</span>
        <span class="token selector">div <span class="token id">#one</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* （0，0，2，0） */</span>
        <span class="token selector"><span class="token class">.father</span> <span class="token class">.son</span> </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* （0，0，1，1） */</span>
        <span class="token selector"><span class="token class">.father</span> p </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> blueviolet<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* （0，0，0，2） */</span>
        <span class="token selector">div p </span><span class="token punctuation">{</span>
            <span class="token property">color</span><span class="token punctuation">:</span> aqua<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>father<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>son<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是一个标签<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p><strong>（拓展）权重叠加计算案例</strong></p>
<blockquote>
<p>权重计算题解题步骤： </p>
<p>\1. 先判断选择器是否能直接选中标签，如果不能直接选中 → 是继承，优先级最低 → 直接pass </p>
<p>\2. 通过权重计算公式，判断谁权重最高</p>
<p>注意点：实际开发中选择标签需要精准，尽量避免多个选择器同时选中一个标签的情况，不要自己难为自己</p>
</blockquote>
<p><strong>（拓展）查错流程 （遇到样式出不来，要学会通过调试工具找错）</strong></p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104214046796.png"></p>
<h2 id="11-综合案例"><a href="#11-综合案例" class="headerlink" title="11 综合案例"></a>11 综合案例</h2><p><strong>目标：通过今天学习的CSS相关属性，完成综合案例</strong></p>
<h3 id="综合案例1-普通导航"><a href="#综合案例1-普通导航" class="headerlink" title="综合案例1-普通导航"></a>综合案例1-普通导航</h3><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104213035384.png" style="zoom:50%;" />



<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* a显示模式是行内，加宽高默认不生效，转显示模式才行：行内块 */</span>
        <span class="token selector">a </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>

            <span class="token comment" spellcheck="true">/* 区分color和background-color： */</span>
            <span class="token comment" spellcheck="true">/* 背景颜色 */</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#ff0000</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 文字颜色 */</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 水平居中 */</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 垂直居中 */</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 去除下划线 */</span>
            <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 为了让宽高生效，显示模式转为行内块 */</span>
            <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector">a<span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#ffa500</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token comment" spellcheck="true">&lt;!-- a{导航$}*5 --></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>导航5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="综合案例2-五彩导航🌲"><a href="#综合案例2-五彩导航🌲" class="headerlink" title="综合案例2-五彩导航🌲"></a>综合案例2-五彩导航🌲</h3><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104213100060.png" style="zoom:50%;" />



<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">a </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">120</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">58</span>px<span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#fff</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 水平居中 */</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 文字下划线去除 */</span>
            <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 元素显示模式：行内块 */</span>
            <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* 每个a的背景图不同，单独找到每一个，设置不同的背景图片 */</span>
        <span class="token selector"><span class="token class">.one</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg1.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.two</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg2.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.three</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg3.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.four</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg4.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* 伪类选择器 */</span>
        <span class="token selector"><span class="token class">.one</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg5.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.two</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg6.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.three</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg7.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.four</span><span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url">url(../images/bg8.png)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>one<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>五彩导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>two<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>五彩导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>three<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>五彩导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>four<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>五彩导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<blockquote>
<p>掌握传统网页布局方案</p>
<p>掌握网页布局和调试技巧</p>
</blockquote>
<hr>

<blockquote>
<p>u 能够认识不同选择器的 优先级 公式 </p>
<p>u 能够进行 CSS 权重叠加计算，分析并解决CSS 冲突问题 </p>
<p>u 能够认识 盒子模型 的组成部分 </p>
<p>u 能够掌握盒子模型的 边框、内边距、外边距 的作用及简写形式 </p>
<p>u 能够计算盒子的 实际大小 </p>
<p>u 能够了解 外边距折叠现象，并知道如何解决 盒子塌陷问题</p>
</blockquote>
<h2 id="12-PxCook的基本使用（CSS布局——盒子模型）（打辅助的前端软件：量尺寸、吸颜色）"><a href="#12-PxCook的基本使用（CSS布局——盒子模型）（打辅助的前端软件：量尺寸、吸颜色）" class="headerlink" title="12 PxCook的基本使用（CSS布局——盒子模型）（打辅助的前端软件：量尺寸、吸颜色）"></a>12 PxCook的基本使用（CSS布局——盒子模型）（打辅助的前端软件：量尺寸、吸颜色）</h2><p>目标：能够使用 PxCook 工具测量设计图的 尺寸 和 颜色 ，能够从psd文件中直接获取数据</p>
<blockquote>
<p><strong>基本使用：</strong></p>
<p>（1）通过软件打开设计图 ① 打开软件 ② 拖拽入设计图 ③ 新建项目</p>
<p>（2）常用快捷键：放大设计图：<strong>ctrl</strong> + <strong>+</strong> ；缩小设计图：<strong>ctrl</strong> + <strong>-<strong>；移动设计图：</strong>空格按住不放，鼠标拖动</strong></p>
<p>（3）常用工具：量尺寸；吸颜色</p>
<p>（4）从psd文件中直接获取数据：切换到开发界面，直接点击获取数据</p>
</blockquote>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220108104608947.png"></p>
<h2 id="13-盒子模型（布局，重中之重）"><a href="#13-盒子模型（布局，重中之重）" class="headerlink" title="13 盒子模型（布局，重中之重）"></a>13 盒子模型（布局，重中之重）</h2><p>目标：能够认识 盒子模型的组成 ，能够掌握盒子模型 边框、内边距、外边距 的设置方法</p>
<blockquote>
<p>内容、内边距、边框、外边距</p>
<p>padding、boder</p>
</blockquote>
<h3 id="13-1盒子模型的介绍"><a href="#13-1盒子模型的介绍" class="headerlink" title="13.1盒子模型的介绍"></a>13.1盒子模型的介绍</h3><blockquote>
<p>盒子的概念：</p>
<ul>
<li>页面中的每一个标签，都可看做是一个 “盒子”，通过盒子的视角更方便的进行布局</li>
<li>浏览器在渲染（显示）网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子</li>
</ul>
<p>盒子模型：<code>CSS </code>中规定每个盒子分别由：<code>内容区域（content）</code>、<code>内边距区域（padding）</code>、<code>边框区域（border）</code>、<code>外边距区域（margin ）</code>构成，这就是 盒子模型。</p>
<p>记忆：可以联想现实中的包装盒</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104214817382.png"></p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token comment" spellcheck="true">/* 纸箱子，填充泡沫 */</span>
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">300</span>px<span class="token punctuation">;</span>
            <span class="token property">background</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 边框线 == 纸箱子 */</span>
            <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#000</span><span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 内边距 == 填充泡沫：出现在内容和盒子边缘之间 */</span>
            <span class="token property">padding</span><span class="token punctuation">:</span> <span class="token number">20</span>px<span class="token punctuation">;</span>
            
            <span class="token comment" spellcheck="true">/* 外边距：两个盒子之间 */</span>
            <span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>电脑内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span>电脑内容<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220108132922631.png"></p>
<h3 id="13-2内容区域的宽度和高度"><a href="#13-2内容区域的宽度和高度" class="headerlink" title="13.2内容区域的宽度和高度"></a>13.2内容区域的宽度和高度</h3><blockquote>
<p>作用：利用 width 和 height 属性默认设置是盒子 内容区域 的大小</p>
<p>属性：width / height</p>
<p>常见取值：数字+px</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104214924862.png" style="zoom: 33%;" />
</blockquote>
<h3 id="13-3边框（-border-）"><a href="#13-3边框（-border-）" class="headerlink" title="13.3边框（ border ）"></a>13.3边框（ border ）</h3><h4 id="边框（border）-单个属性（没啥用，了解就行）"><a href="#边框（border）-单个属性（没啥用，了解就行）" class="headerlink" title="边框（border）- 单个属性（没啥用，了解就行）"></a>边框（border）- 单个属性（没啥用，了解就行）</h4><blockquote>
<p>作用：给设置边框粗细、边框样式、边框颜色效果 </p>
<p>单个属性：<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104215533626.png" style="zoom:50%;" /></p>
</blockquote>
<h4 id="边框（border）-连写形式（实际使用方式）"><a href="#边框（border）-连写形式（实际使用方式）" class="headerlink" title="边框（border）- 连写形式（实际使用方式）"></a>边框（border）- 连写形式（实际使用方式）</h4><blockquote>
<p>属性名：border</p>
<p>属性值：单个取值的连写，取值之间以空格隔开。如：<code>border : 10px solid red;</code> </p>
<p>快捷键：bd + tab</p>
</blockquote>
<h4 id="边框（border）-单方向设置（border-left、border-right）"><a href="#边框（border）-单方向设置（border-left、border-right）" class="headerlink" title="边框（border）- 单方向设置（border-left、border-right）"></a>边框（border）- 单方向设置（border-left、border-right）</h4><blockquote>
<p>场景：只给盒子的某个方向单独设置边框</p>
<p>属性名：border - 方位名词</p>
<p>属性值：连写的取值</p>
</blockquote>
<h4 id="小结"><a href="#小结" class="headerlink" title="小结"></a>小结</h4><blockquote>
<p>给盒子设置四周 20像素、实线、蓝色的边框，属性应该如何设置？</p>
<p><code>border：20px solid blue；</code></p>
<p>给盒子设置上边框 10像素、虚线、黄色的边框，属性应该如何设置？ </p>
<p><code>border-top：10px dashed yellow；</code></p>
</blockquote>
<h4 id="盒子实际大小初级计算公式"><a href="#盒子实际大小初级计算公式" class="headerlink" title="盒子实际大小初级计算公式"></a>盒子实际大小初级计算公式</h4><blockquote>
<p>需求：盒子尺寸 400*400，背景绿色，边框10px 实线 黑色，如何完成？</p>
<p>注意点： ① 设置width和height是内容的宽高！② 设置border会撑大盒子！</p>
</blockquote>
<blockquote>
<p><code>盒子实际大小</code>初级计算公式： </p>
<p>• 盒子宽度 = 左边框 + 内容宽度 + 右边框 </p>
<p>• 盒子高度 = 上边框 + 内容高度 + 下边框</p>
<p>解决：当盒子被border撑大后，如何满足需求？</p>
<p><strong>解决：计算多余大小，手动在内容中减去（手动内减）</strong></p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104220109892.png" style="zoom:50%;" />



<h4 id="（案例）盒子边框的小案例"><a href="#（案例）盒子边框的小案例" class="headerlink" title="（案例）盒子边框的小案例"></a>（案例）盒子边框的小案例</h4><p>需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104220215368.png"></p>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector">div </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">280</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">280</span>px<span class="token punctuation">;</span>
            <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">10</span>px solid <span class="token hexcode">#0000ff</span><span class="token punctuation">;</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#ffc0cb</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h4 id="（案例）新浪导航案例"><a href="#（案例）新浪导航案例" class="headerlink" title="（案例）新浪导航案例"></a>（案例）新浪导航案例</h4><p>需求：根据设计图，通过PxCook量取数据，通过代码在网页中完成一致的效果 </p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104220300663.png"></p>
<blockquote>
<p>布局顺序：<code>从外往内，从上往下</code></p>
<p>每一个盒子的样式：</p>
<p>\1. 宽高 </p>
<p>\2. 辅助的背景颜色 </p>
<p>\3. 盒子模型的部分：border、padding、margin </p>
<p>\4. 其他样式：color、font-、text-、……</p>
</blockquote>
<pre class=" language-html"><code class="language-html"><span class="token doctype">&lt;!DOCTYPE html></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>en<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>X-UA-Compatible<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>IE<span class="token punctuation">=</span>edge<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>width<span class="token punctuation">=</span>device-width, initial-scale<span class="token punctuation">=</span>1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">></span></span>Document<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">></span></span><span class="token style language-css">
        <span class="token selector"><span class="token class">.box</span> </span><span class="token punctuation">{</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            <span class="token property">border-top</span><span class="token punctuation">:</span> <span class="token number">3</span>px solid <span class="token hexcode">#ff8500</span><span class="token punctuation">;</span>
            <span class="token property">border-bottom</span><span class="token punctuation">:</span> <span class="token number">1</span>px solid <span class="token hexcode">#edeef0</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">/* 后代选择器：box里面的a */</span>
        <span class="token selector"><span class="token class">.box</span> a </span><span class="token punctuation">{</span>
            <span class="token property">width</span><span class="token punctuation">:</span> <span class="token number">80</span>px<span class="token punctuation">;</span>
            <span class="token property">height</span><span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            <span class="token comment" spellcheck="true">/* 设置到鼠标悬停 */</span>
            <span class="token comment" spellcheck="true">/* 推荐先加上，可以清楚地看见文字在什么位置 */</span>
            <span class="token comment" spellcheck="true">/* background-color: #edeef0; */</span>
            <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
            <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
            <span class="token property">line-height</span><span class="token punctuation">:</span> <span class="token number">40</span>px<span class="token punctuation">;</span>
            <span class="token property">font-size</span><span class="token punctuation">:</span> <span class="token number">12</span>px<span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#4c4c4c</span><span class="token punctuation">;</span>
            <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        <span class="token selector"><span class="token class">.box</span> a<span class="token pseudo-class">:hover</span> </span><span class="token punctuation">{</span>
            <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token hexcode">#edeef0</span><span class="token punctuation">;</span>
            <span class="token property">color</span><span class="token punctuation">:</span> <span class="token hexcode">#ff8400</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
        
        <span class="token comment" spellcheck="true">/* 从外到内：先宽高背景色，放内容，调节内容的位置；控制文字细节 */</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>box<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>新浪导航<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="13-4内边距（-padding-）（塑料泡沫）"><a href="#13-4内边距（-padding-）（塑料泡沫）" class="headerlink" title="13.4内边距（ padding ）（塑料泡沫）"></a>13.4内边距（ padding ）（塑料泡沫）</h3><h4 id="内边距（padding）-取值"><a href="#内边距（padding）-取值" class="headerlink" title="内边距（padding）- 取值"></a><strong>内边距（padding）- 取值</strong></h4><blockquote>
<p>作用：设置 边框 与 内容区域 之间的距离</p>
<p>属性名：padding</p>
<p>常见取值：</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104220438797.png" style="zoom:50%;" />

<p>记忆规则：<strong>从上开始赋值，然后顺时针赋值，如果设置赋值的，看对面的！！</strong></p>
</blockquote>
<h4 id="内边距（padding）-单方向设置"><a href="#内边距（padding）-单方向设置" class="headerlink" title="内边距（padding）- 单方向设置"></a>内边距（padding）- 单方向设置</h4><blockquote>
<p>场景：只给盒子的某个方向单独设置内边距</p>
<p>属性名：padding - 方位名词</p>
<p>属性值：数字 + px</p>
</blockquote>
<h4 id="小结-1"><a href="#小结-1" class="headerlink" title="小结"></a>小结</h4><blockquote>
<p>给盒子设置四周 20px 的内边距可以通过什么属性设置？</p>
<p><code>padding : 20px ;</code></p>
<p>给盒子设置上下20px、左右30px的内边距可以通过什么属性设置？</p>
<p><code>padding : 20px 30px ;</code></p>
<p>给盒子设置左侧50px的内边距可以通过什么属性设置？</p>
<p><code>padding-left : 50px ; </code></p>
</blockquote>
<h4 id="盒子实际大小终极计算公式"><a href="#盒子实际大小终极计算公式" class="headerlink" title="盒子实际大小终极计算公式"></a>盒子实际大小终极计算公式</h4><blockquote>
<p>需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？</p>
<p>注意点：① 设置width和height是内容的宽高！② 设置border会撑大盒子 ③ 设置padding会撑大盒子 </p>
<p>盒子实际大小终极计算公式：</p>
<p>• 盒子宽度 = 左边框 + 左padding + 内容宽度 + 右padding + 右边框 </p>
<p>• 盒子高度 = 上边框 + 上padding + 内容宽度 + 下padding + 下边框</p>
<p>解决：当盒子被border和padding撑大后，如何满足需求？</p>
<p>自己计算多余大小，手动在内容中减去（手动内减）</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221011402.png" style="zoom:50%;" />
</blockquote>
<h4 id="（案例）-新浪导航的优化"><a href="#（案例）-新浪导航的优化" class="headerlink" title="（案例） 新浪导航的优化"></a><strong>（案例） 新浪导航的优化</strong></h4><p>需求：优化之前的新浪导航，如果每个导航的字数增加，如何完成效果？</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221046988.png"></p>
<h4 id="（拓展）不会撑大盒子的特殊情况（块级元素）"><a href="#（拓展）不会撑大盒子的特殊情况（块级元素）" class="headerlink" title="（拓展）不会撑大盒子的特殊情况（块级元素）"></a>（拓展）不会撑大盒子的特殊情况（块级元素）</h4><p>如果子盒子没有设置宽度，此时宽度默认是父盒子的宽度 </p>
<p>此时给子盒子设置左右的padding或者左右的border，此时不会撑大子盒子</p>
<h4 id="CSS3盒模型（自动内减）"><a href="#CSS3盒模型（自动内减）" class="headerlink" title="CSS3盒模型（自动内减）"></a>CSS3盒模型（自动内减）</h4><p>需求：盒子尺寸300*300，背景粉色，边框10px实线黑色，上下左右20px的内边距，如何完成？</p>
<p>给盒子设置border或padding时，盒子会被撑大，如果不想盒子被撑大？</p>
<p>解决方法 ① ：手动内减</p>
<p>• 操作：自己计算多余大小，手动在内容中减去 </p>
<p>• 缺点：项目中计算量太大，很麻烦</p>
<p>解决方法 ② ：自动内减</p>
<p>• 操作：给盒子设置属性 box-sizing : border-box ; 即可 </p>
<p>• 优点：浏览器会自动计算多余大小，自动在内容中减去</p>
<h4 id="（案例）网页新闻列表案例"><a href="#（案例）网页新闻列表案例" class="headerlink" title="（案例）网页新闻列表案例"></a><strong>（案例）网页新闻列表案例</strong></h4><blockquote>
<p>需求：根据设计图，通过PxCook量取数据，代码在网页中完成一致的效果</p>
<p>布局顺序：从外往内，从上往下</p>
<p>每一个盒子的样式：</p>
<p>\1. 宽高 </p>
<p>\2. 辅助的背景颜色 </p>
<p>\3. 盒子模型的部分：border、padding、margin </p>
<p>\4. 其他样式：color、font-、text-、……</p>
</blockquote>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221444445.png" style="zoom:50%;" />



<h3 id="13-5外边距（margin）"><a href="#13-5外边距（margin）" class="headerlink" title="13.5外边距（margin）"></a>13.5外边距（margin）</h3><h4 id="外边距（margin）-取值"><a href="#外边距（margin）-取值" class="headerlink" title="外边距（margin）- 取值"></a><strong>外边距（margin）- 取值</strong></h4><blockquote>
<p>作用：设置边框以外，盒子与盒子之间的距离</p>
<p>属性名：margin</p>
<p>常见取值：</p>
<img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221543694.png" style="zoom: 33%;" />

<p>记忆规则：<strong>从上开始赋值，然后顺时针赋值，如果没设置赋值的，看对面的！！</strong></p>
</blockquote>
<h4 id="（margin）-单方向设置"><a href="#（margin）-单方向设置" class="headerlink" title="（margin） - 单方向设置"></a><strong>（margin） - 单方向设置</strong></h4><blockquote>
<p>场景：只给盒子的某个方向单独设置外边距</p>
<p>属性名：margin - 方位名词</p>
<p>属性值：数字 + px</p>
</blockquote>
<h4 id="小结-2"><a href="#小结-2" class="headerlink" title="小结"></a>小结</h4><blockquote>
<p>给盒子设置四周 20px 的外边距可以通过什么属性设置？ </p>
<p><code>margin : 20px ; </code></p>
<p>给盒子设置上下20px、左右30px的外边距可以通过什么属性设置？ </p>
<p><code>margin : 20px 30px ; </code></p>
<p>给盒子设置左侧50px的外边距可以通过什么属性设置？ </p>
<p><code>margin-left : 50px ;</code></p>
</blockquote>
<h4 id="margin单方向设置的应用"><a href="#margin单方向设置的应用" class="headerlink" title="margin单方向设置的应用"></a>margin单方向设置的应用</h4><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221800314.png" style="zoom:50%;" />



<h4 id="清除默认内外边距"><a href="#清除默认内外边距" class="headerlink" title="清除默认内外边距"></a>清除默认内外边距</h4><blockquote>
<p>场景：浏览器会默认给部分标签设置默认的margin和padding，但一般在项目开始前需要先清除这些标签默认的 </p>
<p>margin和padding，后续自己设置 </p>
<p>• 比如：body标签默认有margin：8px </p>
<p>• 比如：p标签默认有上下的margin </p>
<p>• 比如：ul标签默认由上下的margin和padding-left</p>
<p>解决方法：</p>
<p><img src="https://notes2021.oss-cn-beijing.aliyuncs.com/2021/image-20220104221920581.png"></p>
</blockquote>
<h4 id="外边距正常情况"><a href="#外边距正常情况" class="headerlink" title="外边距正常情况"></a>外边距正常情况</h4><blockquote>
<p>场景：水平布局 的盒子，左右的margin正常，互不影响</p>
<p>结果：最终两者距离为左右margin的和</p>
</blockquote>
<h4 id="外边距折叠现象-–-①-合并现象"><a href="#外边距折叠现象-–-①-合并现象" class="headerlink" title="外边距折叠现象 – ① 合并现象"></a>外边距折叠现象 – ① 合并现象</h4><blockquote>
<p>场景：垂直布局 的 块级元素，上下的margin会合并</p>
<p>结果：最终两者距离为margin的最大值</p>
<p>解决方法：避免就好，只给其中一个盒子设置margin即可 </p>
</blockquote>
<h4 id="外边距折叠现象-–-②-塌陷现象"><a href="#外边距折叠现象-–-②-塌陷现象" class="headerlink" title="外边距折叠现象 – ② 塌陷现象"></a>外边距折叠现象 – ② 塌陷现象</h4><blockquote>
<p>场景：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上</p>
<p>结果：导致父元素一起往下移动 </p>
<p>解决方法：</p>
<p>\1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top） </p>
<p>\2. 给父元素设置overflow：hidden </p>
<p>\3. 转换成行内块元素 </p>
<p>\4. 设置浮动</p>
</blockquote>
<h4 id="行内元素的margin和padding无效情况"><a href="#行内元素的margin和padding无效情况" class="headerlink" title="行内元素的margin和padding无效情况"></a>行内元素的margin和padding无效情况</h4><blockquote>
<p>场景：给行内元素设置margin和padding时</p>
<p>结果：</p>
<p>\1. 水平方向的margin和padding布局中有效！ </p>
<p>\2. 垂直方向的margin和padding布局中无效！</p>
</blockquote>
<hr>


<h2 id="14浮动"><a href="#14浮动" class="headerlink" title="14浮动"></a>14浮动</h2><blockquote>
<p>第18h开始项目阶段</p>
</blockquote>
<h1 id="学成在线"><a href="#学成在线" class="headerlink" title="学成在线"></a>学成在线</h1><blockquote>
<p>还原企业中制作网页的流程</p>
<p>掌握学习类网页布局技巧</p>
</blockquote>
<h1 id="小兔鲜儿"><a href="#小兔鲜儿" class="headerlink" title="小兔鲜儿"></a>小兔鲜儿</h1><blockquote>
<p>还原企业中制作网页的流程</p>
<p>掌握电商站布局和调试技巧</p>
</blockquote>

                
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/about" rel="external nofollow noreferrer">Lemonade</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="http://101.42.229.218/2022/01/02/html5-css3-%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE-%E9%BB%91%E9%A9%AC20211116/">http://101.42.229.218/2022/01/02/html5-css3-%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE-%E9%BB%91%E9%A9%AC20211116/</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/about" target="_blank">Lemonade</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/tags/html5-css3/">
                                    <span class="chip bg-color">html5&amp;css3</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban,linkedin" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/2022/01/02/%E5%8F%8D%E8%B4%AA%E9%A3%8E%E6%9A%B4/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/19.jpg" class="responsive-img" alt="反贪风暴">
                        
                        <span class="card-title">反贪风暴</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2022-01-02
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/%E7%94%B5%E5%BD%B1/" class="post-category">
                                    电影
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/hkp/">
                        <span class="chip bg-color">hkp</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/2022/01/01/SpringCloud_2%E9%BB%91%E9%A9%AC/">
                    <div class="card-image">
                        
                        
                        <img src="/medias/featureimages/10.jpg" class="responsive-img" alt="SpringCloud_2黑马">
                        
                        <span class="card-title">SpringCloud_2黑马</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2022-01-01
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/categories/3-%E5%88%86%E5%B8%83%E5%BC%8F-%E5%BE%AE%E6%9C%8D%E5%8A%A1/" class="post-category">
                                    3.分布式&微服务
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/tags/spring/">
                        <span class="chip bg-color">spring</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="7141772781"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='list'
                   preload='auto'
                   volume='0.7'
                   list-folded='false'
        >
        </meting-js>
    </div>
</div>

<script src="/libs/aplayer/APlayer.min.js"></script>
<script src="/libs/aplayer/Meting.min.js"></script>

    

    <div class="container row center-align"
         style="margin-bottom: 0px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2019-2022</span>
            
            <a href="/about" target="_blank">Lemonade</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
                &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                        class="white-color">55.6k</span>
            
            
            
                
            
            
                <span id="busuanzi_container_site_pv">
                &nbsp;|&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;
                    <span id="busuanzi_value_site_pv" class="white-color"></span>
            </span>
            
            
                <span id="busuanzi_container_site_uv">
                &nbsp;|&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;
                    <span id="busuanzi_value_site_uv" class="white-color"></span>
            </span>
            
            <br>

            <!-- 运行天数提醒. -->
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/cat0501" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="https://blog.csdn.net/AC_872767407?spm=1001.2014.3001.5343" class="tooltipped" target="_blank" data-tooltip="关注我的CSDN: https://blog.csdn.net/AC_872767407?spm=1001.2014.3001.5343" data-position="top" data-delay="50">
        <i class="fab fa-csdn">C</i>
    </a>



    <a href="mailto:17782975312@163.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=872767407" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 872767407" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







    <a href="/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>

</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/libs/materialize/materialize.min.js"></script>
    <script src="/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/libs/aos/aos.js"></script>
    <script src="/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/js/matery.js"></script>

    

    

    <!-- 雪花特效 -->
    

    <!-- 鼠标星星特效 -->
    

     
        <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
        <script src="/libs/others/TencentCaptcha.js"></script>
        <button id="TencentCaptcha" data-appid="xxxxxxxxxx" data-cbfn="callback" type="button" hidden></button>
    

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    <!--腾讯兔小巢-->
    
    

    
    
    <script type="text/javascript" size="150" alpha='0.6'
        zIndex="-1" src="/libs/background/ribbon-refresh.min.js" async="async"></script>
    

    
    <script type="text/javascript" src="/libs/background/ribbon-dynamic.js" async="async"></script>
    

    
    <script src="/libs/instantpage/instantpage.js" type="module"></script>
    

    
    <script type="text/javascript">
        //只在桌面版网页启用特效
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="/js/sakura.js"><\/script>');
        }
    </script>
        

</body>

</html>
